import { Link } from 'react-router-dom';
import { TrendingUp, Eye, ThumbsUp, ExternalLink } from 'lucide-react';
import { Tool } from '../types/tool';

interface HotToolsRankingProps {
  tools: Tool[];
  type?: 'views' | 'likes';
  limit?: number;
}

export default function HotToolsRanking({ tools, type = 'views', limit = 5 }: HotToolsRankingProps) {
  // 根据类型排序
  const sortedTools = [...tools].sort((a, b) => {
    const aValue = type === 'views' ? (a.stats?.views || 0) : (a.stats?.likes || 0);
    const bValue = type === 'views' ? (b.stats?.views || 0) : (b.stats?.likes || 0);
    return bValue - aValue;
  }).slice(0, limit);

  const title = type === 'views' ? '浏览排行' : '点赞排行';
  const Icon = type === 'views' ? Eye : ThumbsUp;

  return (
    <div className="bg-white rounded-xl shadow-sm p-6 border border-slate-200">
      <div className="flex items-center space-x-2 mb-4">
        <TrendingUp className="w-5 h-5 text-orange-500" />
        <h3 className="text-lg font-semibold text-slate-800">{title}</h3>
      </div>

      <div className="space-y-3">
        {sortedTools.map((tool, index) => {
          const value = type === 'views' ? (tool.stats?.views || 0) : (tool.stats?.likes || 0);
          
          return (
            <Link
              key={tool.id}
              to={`/tool/${tool.id}`}
              className="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-50 transition-colors group"
            >
              {/* 排名 */}
              <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm ${
                index === 0 ? 'bg-gradient-to-br from-yellow-400 to-orange-500 text-white' :
                index === 1 ? 'bg-gradient-to-br from-gray-300 to-gray-400 text-white' :
                index === 2 ? 'bg-gradient-to-br from-orange-400 to-orange-600 text-white' :
                'bg-slate-100 text-slate-600'
              }`}>
                {index + 1}
              </div>

              {/* 工具信息 */}
              <div className="flex-1 min-w-0">
                <div className="flex items-center space-x-2">
                  <h4 className="text-sm font-medium text-slate-800 truncate group-hover:text-primary-600">
                    {tool.name}
                  </h4>
                  <ExternalLink className="w-3 h-3 text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity" />
                </div>
                <p className="text-xs text-slate-500 truncate">{tool.description}</p>
              </div>

              {/* 统计数字 */}
              <div className="flex items-center space-x-1 text-slate-600">
                <Icon className="w-4 h-4" />
                <span className="text-sm font-medium">{value}</span>
              </div>
            </Link>
          );
        })}

        {sortedTools.length === 0 && (
          <div className="text-center py-8 text-slate-500">
            暂无数据
          </div>
        )}
      </div>
    </div>
  );
}




